<template>
  <div>
    <ul>
      <li class="list" v-for="(item) in enterinfo" v-bind:key="item" @click="eninfo(item.wid,item.tid)">
        <div class="sub-li" style="position:relative;">
          <a href="#" class="job-info" style="text-decoration:none">
            <div class="sub-li-top" style="margin-top: 0px">
              <p class="gname">{{item.enterInfo.cname}}</p>
              <p class="salary">{{item.salary}}</p>
            </div>
            <p class="job-text">{{item.address.province}}<span class="vline">
                  </span>{{item.exp}}<span class="vline">
                    </span>{{item.xli}}</p>
          </a>
          <div class="sub-li-bottom">
            <a href="#" class="user-info" style="text-decoration:none">
              <p><img :src="qz+item.enterInfo.logoimg"></p>
            </a>
            <a href="#" style="margin-left: 28px;font-size: 14px;color: #8c939d;margin-top: 8px">
              <span >{{item.gname}}</span>
              <span class="vline">
                    </span>
              <span >{{item.type}}</span>
            </a>
          </div>
        </div>
      </li>
    </ul>
    <div class="demo-image" >
      <div class="block">
        <el-image
            style="width: 121px; height: 104px;margin-top: 20px"
            :src="url"
            :fit="fit"
            @click="insertwork()"
        >
        </el-image>
      </div>
    </div>
    <div style="width: 700px">
    <el-dialog title="添加岗位" :visible.sync="gw_state" >
      <el-form ref="form" :model="user_form" label-width="80px">
        <el-form-item label="公司编号">
          <el-input v-model="form.gsbh" disabled title="用户名不可修改" style="width: 230px"></el-input>
        </el-form-item>
        <el-form-item label="岗位编号">
          <el-input v-model="form.gwbh"  style="width: 230px"></el-input>
        </el-form-item>
        <el-form-item label="岗位名称">
          <el-input v-model="form.gwmc"  style="width: 230px"></el-input>
        </el-form-item>
        <el-form-item label="岗位属性">
          <el-select v-model="form.gwsx" placeholder="请选择岗位属性" style="width: 230px">
            <el-option label="IT互联网" value="IT互联网"></el-option>
            <el-option label="金融" value="金融"></el-option>
            <el-option label="房地产" value="房地产"></el-option>
            <el-option label="教育培训" value="教育培训"></el-option>
            <el-option label="娱乐传媒" value="娱乐传媒"></el-option>
            <el-option label="医疗健康" value="医疗健康"></el-option>
            <el-option label="法律咨询" value="法律咨询"></el-option>
            <el-option label="供应链" value="供应链"></el-option>
            <el-option label="采购贸易" value="采购贸易"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作经验">
          <el-input v-model="form.gzjy"  style="width: 230px"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="form.xli" placeholder="请选择学历" style="width: 230px">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月薪">
          <el-input v-model="form.yx"  style="width: 230px"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader
              style="width: 300px"
              size="large"
              :options="options"
              v-model="selectedOptions"
              >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.xxdz"  style="width: 300px"></el-input>
        </el-form-item>
        <label>工作职责</label>
        <vTinymce v-model="form.gwzz" />
        <label>任职要求</label>
        <vTinymce v-model="form.rzyq" />
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="insertworkfrom"
              v-show="gw_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import insert from "../../../assets/imgs/insert.jpg"
import { regionData,CodeToText } from 'element-china-area-data'

export default {
  data(){
    return{
      options: regionData,
      value:"",
      selectedOptions: [],
      form:{
        yx:"",
        gwzz:"",
        rzyq:"",
        gsbh:"",
        gwmc:"",
        gwbh:"",
        gwsx:"",
        gzjy:"",
        xli:"",
        xxdz: "",
      },
      gw_state:false,
      gw_input_state:false,
      qz:this.$axios.defaults.baseURL,
      enterinfo:[],
      url: insert
    };
  },
  methods:{
    upLoadFile(file){
      this.formData.append("files",file.file)
    },
    eninfo(wid,tid){
      this.$router.push({path: '/enterworkinfo', query: {wid: wid,tid:tid,type:"collect"}})
    },
    insertwork(){
      this.gw_input_state = true;
      this.gw_state = true;
    },
    insertworkfrom(){
      this.formData = new FormData();
      this.formData.append("yx",this.form.yx);
      this.formData.append("gwzz",this.form.gwzz);
      this.formData.append("rzyq",this.form.rzyq);
      this.formData.append("gsbh",this.form.gsbh);
      this.formData.append("gwmc",this.form.gwmc);
      this.formData.append("gwbh",this.form.gwbh);
      this.formData.append("gwsx",this.form.gwsx);
      this.formData.append("xxdz",this.form.xxdz);
      this.formData.append("gzjy",this.form.gzjy);
      this.formData.append("xli",this.form.xli);
      this.formData.append("uid",sessionStorage.getItem("enteruid"));
      this.formData.append("s",CodeToText[this.selectedOptions[0]]);
      let address = CodeToText[this.selectedOptions[0]]+CodeToText[this.selectedOptions[1]]+CodeToText[this.selectedOptions[2]];
      this.formData.append("sxq",address);
      this.$axios.post(this.$axios.defaults.baseURL+"/enterprise/insertWork",this.formData).then(res => {
        if (res.status) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
        setTimeout(() => {
          this.gw_state = false;
          this.gw_input_state = false;
          if(res.status){
            this.selectWorkAll();
          }
        }, 1500);
      })
    },
    selectWorkAll(){
      this.$axios({
        url: this.$axios.defaults.baseURL+"/enterprise/selectenterall",
        method: "get",
        params:{
          uid:sessionStorage.getItem("enteruid")
        }
      }).then(res => {
        this.enterinfo = res.data;
        this.form.gsmc = res.data[0].enterInfo.cname;
        this.form.gsbh = res.data[0].tid;
      })
    },
  },
  mounted() {
    this.selectWorkAll();
  }
}

</script>

<style scoped>
.vline {
  display:inline-block;
  width:1px;
  height:12px;
  vertical-align:middle;
  background:#8c939d;
  margin:0 10px
}
.list{
  list-style-type:none;
  float: left;
  padding-right: 20px;
  padding-top: 20px;
}

.sub-li .sub-li-top {
  width:340px;
  display:flex;
  align-items:center
}
.sub-li .sub-li-top {
  position:relative;
  max-width:200px;
  font-size:15px;
  margin-right:8px;
  line-height:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.sub-li .sub-li-top{
  font-size:15px;
  color:#fd7240;
  line-height:normal;
  flex:1;
  text-align:right;
  max-width:none
}

.salary {
  font-size:15px;
  color:#fd7240;
  margin-top: 0px;
  padding-left: 17%;
}

.gname {
  font-size:15px;
  color:black;
  margin-top: 0px;
  margin-left:0px;
}
.sub-li a.job-info {
  padding:0;
  width:340px;
}
.sub-li-bottom a.user-info {
  margin:0
}
.sub-li-bottom .user-info img {
  width:30px;
  height:30px
}
.job-text{
  font-size: 14px;
  color: #8c939d;
}
.sub-li .sub-li-bottom {
  border-top:1px solid #eef0f5;
  display:flex;
  margin-top:8px;
  padding-top:12px
}
.sub-li .sub-li-bottom .sub-li-bottom-commany-info {
  font-size:13px;
  color:#8d92a1;
  display:flex;
  align-items:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.sub-li .sub-li-bottom .sub-li-bottom-commany-info .name {
  margin-left:10px;
  margin-right:20px;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.sub-li .sub-li-bottom .sub-li-bottom-commany-info .type {
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.sub-li .sub-li-bottom .sub-li-bottom-commany-info{
  max-width:80px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.sub-li {
  width:340px;
  height:100%;
  position:relative;
  padding:20px 20px 0 20px;
  box-sizing:border-box;
  border-radius:5px;
  background-color: white;
}

</style>